<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷</title>
    <script src="../js/vue3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .content {
            margin: 3rem auto;
            box-sizing: border-box;
        }
        
        .row {
            height: 1.5rem;
            display: flex;
            justify-content: center;
        }
        
        .col {
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            border: 0.1px solid rgb(155, 155, 155);
            text-align: center;
            background-color: lightgray;
            font-family: "GenShin";
            font-size: 1.2rem;
            font-weight: 900;
            color: blue;
        }
        
        @font-face {
            font-family: 'GenShin';
            src: url('../font/GenShinGothic-Monospace-Heavy-2.ttf')format('truetype');
        }
        
        .num-color--1 {
            color: yellow;
            background-color: red;
        }
        
        .num-color-0 {
            opacity: 0;
        }
        
        .num-color-1 {
            color: blue;
        }
        
        .num-color-2 {
            color: green;
        }
        
        .num-color-3 {
            color: red;
        }
        
        .num-color-4 {
            color: navy;
        }
        
        .num-color-5 {
            color: brown;
        }
        
        .num-color-6 {
            color: aqua;
        }
        
        .num-color-7 {
            color: grey;
        }
        
        .num-color-8 {
            color: darkmagenta;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="board">
                <div class="row" v-for="(col,y) in mine">
                    <div class="col" v-for="(unit,x) in col" @click="sweep(x,y)">
                        <div :class="'num-color-'+mine[y][x]">
                            {{unit}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    mine: [],
                    show: [],
                    mines: 10,
                    rows: 10,
                    cols: 10,
                    isFirstClick: true,
                }
            },
            mounted() {
                //初始化棋盘
                this.mine = this.createBoard();
            },
            methods: {
                //初始化棋盘
                createBoard() {
                    let arr = new Array();
                    for (let i = 0; i < this.rows; i++) {
                        arr[i] = new Array();
                        for (let j = 0; j < this.cols; j++) {
                            arr[i][j] = 0;
                        }
                    }
                    return arr;
                },
                //点击
                sweep(x, y) {
                    //是否第一次点击
                    if (this.isFirstClick) {
                        //初始化雷区
                        this.createMine(x, y);
                        //初始化数字
                        this.createNumber();
                    }
                },
                //初始化雷区
                createMine(x, y) {
                    for (let i = 0; i < this.mines;) {
                        let m = Math.floor(Math.random() * this.rows)
                        let n = Math.floor(Math.random() * this.cols)
                        if (m == y && x == n) {
                            continue;
                        }
                        if (this.mine[m][n] < 0) {
                            continue;
                        }
                        this.mine[m][n] = -1;
                        i++;
                        this.isFirstClick = false;
                    }
                },
                //初始化数字
                createNumber() {
                    for (let i = 0; i < this.rows; i++) {
                        for (let j = 0; j < this.cols; j++) {
                            if (this.mine[i][j] < 0) {
                                for (let k = i - 1; k <= i + 1; k++) {
                                    for (let g = j - 1; g <= j + 1; g++) {
                                        if (k < this.rows && k >= 0 && g < this.cols && g >= 0) {
                                            if (this.mine[k][g] >= 0) {
                                                this.mine[k][g]++;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
        });
        v_app.mount("#app");
    </script>
</body>


</html>